<template>
  <div class="Layout maxwh">
    <transition
      enter-active-class="animate__animated animate__bounceInLeft"
      leave-active-class="animate__animated animate__bounceInRight"
    >
      <Menus
        :isApp="isApp"
        v-show="isShowMenu"
        :selectedKeys="getSelectedKey()"
      />
    </transition>
    <transition
      enter-active-class="animate__animated animate__bounceInRight"
      leave-active-class="animate__animated animate__bounceInLeft"
    >
      <div class="page_column" :class="{ active: !isShowMenu }">
        <div class="navs">
          <div @click.stop.prevent>
            <p class="title">{{ selectedTitle }}</p>
            <a-button
              v-if="isApp"
              type="primary"
              :icon="isApp ? 'menu-fold' : 'menu-unfold'"
              @click="isShowMenu = !isShowMenu"
            />
          </div>
        </div>
        <div class="main">
          <router-view />
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import Menus from '@/components/Menus.vue'
import Column from '@/components/Column.vue'
import Row from '@/components/Row.vue'
import { mapState } from 'vuex'
import { toggleTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils.js'

export default {
  name: 'Layout',
  data() {
    return {
      // 当前是PC端/移动端
      isApp: false,
      // 是否显示左侧目录树
      isShowMenu: true,
      screenWidth:
        document.body.clientWidth || document.documentElement.clientWidth,
      // 当前目录树选择的项的key
      selectedKeys: [],
    }
  },
  computed: {
    ...mapState(['selectedTitle']),
  },
  mounted() {
    const that = this
    this.getNavigator()
    window.onresize = () => {
      return (() => {
        window.screenWidth =
          document.body.clientWidth || document.documentElement.clientWidth
        that.screenWidth = window.screenWidth
        that.getNavigator()
      })()
    }
  },
  methods: {
    getNavigator() {
      const isNavigator =
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
      if (isNavigator || this.screenWidth < 920) {
        this.isApp = true
        this.isShowMenu = false
      } else {
        this.isApp = false
        this.isShowMenu = true
      }
    },
    // 获取历史选中的节点
    getSelectedKey() {
      const getItemKey = localStorage.getItem('selectedKey')
      let selectedKeys = []
      if (getItemKey) {
        selectedKeys[0] = getItemKey
      }
      return selectedKeys
    },
    // 动态切换主题
    handleChange(value) {
      toggleTheme({
        scopeName: value,
      })
    },
  },
  components: {
    Menus,
    Column,
    Row,
  },
}
</script>
<style scoped lang="less">
.Layout {
  display: flex;
  .page_column {
    width: calc(100% - 300px);
    height: 100%;
    &.active {
      width: 100%;
    }
    .navs {
      height: 208px;
      width: 100%;
      background: #2875e0;
      display: flex;
      align-items: center;
      .title {
        padding-left: 80px;
        color: white;
        font-size: 48px;
        line-height: 48px;
        font-weight: 500;
        letter-spacing: 2px;
      }
    }
    .main {
      width: 100%;
      height: calc(100% - 208px);
      display: flex;
      /* overflow: hidden;
      overflow-y: auto; */
    }
  }
}
</style>
